<template>
	<div class="order_list">
		<!-- 单件 -->
		<div class="order_list_item" @click="detailsClick">
			<div class="order_list_header">
                <div class="order_list_header_top">
                    <div class="order_member">
                        <text class="order_list_header_name">{{orderData.consignee}}</text>
                        <text class="order_list_header_name">{{orderData.phone}}</text>
                    </div>
                    <text class="order_list_header_title">{{orderData.address}}</text>
                </div>
				<text class="order_list_header_status">{{orderData.statusDescr}}</text>
			</div>
			<div class="order_list_content" v-if="orderData.itemList.length ==1" v-for="item in orderData.itemList">
				<div class="order_list_content_img mg-r20">
					<image style="width:170px;height:170px" :src="item.thumbnail"></image>
				</div>
				<div class="order_list_content_box">
					<div class="order_list_content_top">
						<text class="order_list_content_name">{{item.name}}</text>
						<text class="order_list_content_price">¥{{item.price}}</text>
					</div>
					<div class="order_list_content_bottom">
						<text class="order_list_content_subtitle">{{item.spec}}</text>
						<text class="order_list_content_number">x {{item.quantity}}</text>
					</div>
				</div>
			</div>

			<div class="order_list_content" v-if="orderData.itemList.length >1">
				<div class="order_list_content_img mg-r20" v-if="index==0 || index==1" v-for="(item,index) in orderData.itemList">
					<image style="width:170px;height:170px" :src="item.thumbnail"></image>
				</div>
				<div class="order_list_content_more">
					<text class="order_item_more_number">共计{{orderData.subQuantity}}件</text>
					<icon class="order_item_icon" content="ios-arrow-forward"></icon>
				</div>
			</div>
			<div class="order_list_content_information">
				<text class="order_list_content_left">共计{{orderData.subQuantity}}件商品</text>
				<div class="order_price_box">
					<text class="order_price_title">实退款：</text>
					<text class="order_price_icon">¥</text>
					<text class="order_price_number">{{orderData.amountPayable}}</text>
				</div>
			</div>
			<div class="order_list_botton" v-if="orderData.status==0">
				<div class="disagree-click" @click="disagreeClick">
					<text class="order_list_botton_red_title  botton_Fz_Color">拒绝退款</text>
				</div>
                <div class="button-click" @click="agreeClick">
                    <text class="order_list_botton_red_title  botton_Fz_Color">同意退款</text>
                </div>
			</div>
			<div class="order_list_botton" v-if="orderData.status==1||orderData.status==2">
				<div class="button-click" v-if="orderData.status==1||orderData.status==2" @click="shippingClick(orderData.id)"><text style=" font-size: 20px;color: white;">生成退货单</text></div>
			</div>
			<div class="order_list_botton" v-if="orderData.status==3">
				<div class="button-click" v-if="orderData.status==3" @click="refundsClick(orderData.id)"><text style=" font-size: 20px; color: white;">确认退款</text></div>
			</div>

		</div>
	</div>
</template>
<script>
	const pay = app.requireModule("eeui/pay");
	const storage = weex.requireModule('storage')
	const modal = weex.requireModule('modal')
	import {
		find,
		confirm,
		cancel,
		refunds
	} from '../../api/askfor.js';
	export default {
		name: '',
		data() {
			return {}
		},
		props: [
			'orderData'
		],
		created() { // 在实例创建完成后被立即调用
		},
		methods: {
			detailsClick() {
				var _this = this
				eeui.openPage({
						params: this.orderData.id,
						url: 'root://pages/askfor/orderDetails.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
						if (result.status == 'stop') {
							storage.getItem('askDetails', event => {
								if (event.data == 'true') {
									_this.refreshClick()
								}
							})
							storage.removeItem('askDetails', event => {

							})
						}
					}
				);
			},
			disagreeClick() {
				var _this = this
				if(this.checkPermission(['askfor.cancel'])==false){
					eeui.alert('您没有拒绝退款权限', function() {

					});
					return
				}
				eeui.confirm({
					title: "温馨提示",
					message: "你确定拒绝退款？",
					buttons: ["取消", "确定"]
				}, function(result) {
					if (result.status == "click" && result.title == "确定") {
                        // _this.$emit('loadList')
						cancel(_this.orderData.id).then(response => {
							// _this.$emit('loadList')
							// storage.setItem('askDetails', 'true')
                            eeui.alert({
                                title: '温馨提示',
                                message: '你已拒绝退款！',
                            }, function() {
                                _this.refreshClick()
                            });

						})
					}
				});
			},
			agreeClick() {
				var _this = this
				if(this.checkPermission(['askfor.confirm'])==false){
					eeui.alert('您没有同意退款权限', function() {

					});
					return
				}
				eeui.confirm({
					title: "温馨提示",
					message: "你确定同意退款？",
					buttons: ["取消", "确定"]
				}, function(result) {
					if (result.status == "click" && result.title == "确定") {
							// _this.$emit('loadList')
						confirm(_this.orderData.id).then(response => {
							// storage.setItem('askDetails', 'true')
							// _this.$emit('loadList')
                            eeui.alert({
                                title: '温馨提示',
                                message: '你已同意退款！',
                            }, function() {
                                _this.refreshClick()
                            });
						})
					}
				});
			},
			shippingClick() {
			    var _this = this
				if(this.checkPermission(['askfor.received'])==false){
					eeui.alert('您没有生成退货单权限', function() {

					});
					return
				}
				eeui.openPage({
					url: 'root://pages/askfor/orderShipping.js',
					params: this.orderData.id,
					statusBarType: 'immersion',
					statusBarStyle: false
				}, (res) => {
					if (res.status == 'stop') {
						storage.getItem('askforReturn', result => {
							if (result.data == 'return') {
								// this.$emit('loadList')
								// storage.removeItem('askforReturn')
                                _this.refreshClick()
							}
						});
					}

				})
			},
			refundsClick(id) {
				var _this = this
				if(this.checkPermission(['askfor.refund'])==false){
					eeui.alert('您没有确认退款权限', function() {

					});
					return
				}
				eeui.confirm({
					title: "温馨提示",
					message: "是否确认退款？",
					buttons: ["取消", "确定"]
				}, function(result) {
					if (result.status == "click" && result.title == "确定") {
							// _this.$emit('loadList')
						refunds(id).then(response => {
							// storage.setItem('askDetails', 'true')
							// this.$emit('loadList')
                            eeui.alert({
                                title: '温馨提示',
                                message: '你已确认退款！',
                            }, function() {
                                _this.refreshClick()
                            });
						})
					}
				});
			},
			refreshClick() {
				this.$emit('refreshClick')
			},
		},
		components: {},
	}
</script>

<style scoped>
	.order_list {
		width: 750px;
		padding-left: 25px;
		padding-right: 25px;
		box-sizing: border-box;
	}

	.order_list_item {
		width: 700px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
		margin-top: 20px;
		padding: 25px;
		box-sizing: border-box;
	}

	.order_list_header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		width: 650px;
		/*height: 40px;*/
	}

	.order_list_header_title {
		font-size: 24px;
		font-weight: 500;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		width: 580px;
		lines: 1;
		text-overflow: ellipsis;
	}

	.order_list_botton {
		width: 650px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		margin-top: 20px;
	}

	.order_list_botton_gray {
		width: 136px;
		height: 48px;
		border-style: solid;
		border-width: 1px;
		border-color: rgba(126, 128, 136, 0.8);
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 25px;
	}

	.order_list_botton_gray_title {
		font-size: 24px;
		font-weight: 400;
		line-height: 48px;
		color: rgba(26, 26, 30, 0.5);
	}


	.order_list_botton_red {
		width: 136px;
		height: 48px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
	}

	.button-click {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 50px;
		margin-left: 20px;
		border-radius: 5px;
		width: 120px;
		background-color: #409EFF;
	}

	.order_list_botton_red_title {
		font-size: 24px;
		font-weight: 400;
		color: white;
		line-height: 48px;
	}

	.disagree-click {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 50px;
		margin-left: 20px;
		border-radius: 5px;
		width: 120px;
		background-image: linear-gradient(to left, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
	}

	.order_list_header_status {
		font-size: 24px;
		font-weight: 400;
		color: rgba(215, 38, 28, 1);
	}

	.order_list_content {
		width: 650px;
		display: flex;
		flex-direction: row;
		margin-top: 42px;
		position: relative;
	}

	.order_list_content_img {
		width: 170px;
		height: 170px;
		background: rgba(250, 250, 250, 1);
		border-radius: 4px;
		overflow: hidden;
	}

	.order_list_content_box {
		display: flex;
		flex-direction: column;
	}

	.order_list_content_top {
		width: 460px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 15px;
	}

	.order_list_content_name {
		font-size: 28px;
		font-weight: 400;
		width: 380px;
		color: rgba(26, 26, 30, 1);
		line-height: 42px;
		display: block;
		lines: 1;
		margin-bottom: 5px;
		text-overflow: ellipsis;
	}

	.order_list_content_price {
		font-size: 18px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
	}

	.order_list_content_bottom {
		width: 460px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	.order_list_content_subtitle {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		opacity: 0.5;
		width: 380px;
		text-overflow: ellipsis;
		lines: 2;
	}

	.order_list_content_number {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		opacity: 0.5;
	}

	.order_list_content_information {
		width: 650px;
		height: 40px;
		background: rgba(0, 0, 0, 0);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		margin-top: 40px;
	}

	.order_list_content_left {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		opacity: 0.5;
	}

	.order_price_title {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
	}

	.order_price_icon {
		font-size: 20px;
		font-weight: 400;
		color: #eb594f;
		line-height: 36px;
	}

	.order_price_number {
		font-size: 24px;
		font-weight: 400;
		color: #eb594f;
		line-height: 36px;
	}

	.order_price_box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.order_list_content_more {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		right: 0;
		height: 170px;
	}

	.order_item_icon {
		font-size: 36px;
		opacity: 0.3;
		width: 50px;
		height: 50px;
	}

	.order_item_more_number {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
	}

	.mg-l20 {
		margin-left: 20px;
	}

	.mg-r20 {
		margin-right: 20px
	}
    .order_list_header_top{
        width: 550px;
    }
    .order_member{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .order_list_header_name{
        font-size: 24px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        margin-right: 10px;
    }
</style>
